<template>
  <div>
    <van-nav-bar
        title="支付页面"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <h2 style="text-align: center;">欢迎使用微信支付</h2>
    <div style="text-align: center;">订单号为：{{trade}}</div>
    <canvas id="canvas" style="align-content: center;"></canvas>
    <div style="text-align: center;">请使用微信扫描二维码支付</div>
    <br>

  </div>
</template>

<script>
import Vue from "vue"
import QRCode from "qrcode"
import axios from "axios";
Vue.use(QRCode)
  export default {
    data() {
      return {
        trade: null,
        order:{},
        recharge:{},
      }
    },
    methods:{
      onClickLeft() {
        this.$router.go(-1)
      },
      useqrcode(url) {
        var canvas = document.getElementById("canvas");
        QRCode.toCanvas(canvas, url, function (error) {
          if (error) {
          } else {
            console.log("success!");
          }
        });
      },
      findOne(){
        axios.post("http://localhost:9999/api-user/recharge/findOne?code="+this.order.code).then(res=>{
          this.recharge = res.data;
        })
      }
    },
    created() {
      this.order.code = this.$route.query.code;
      console.log(this.order.code+"-----123")
      this.findOne();
    },
    mounted(){
      axios.post(`http://localhost:9999/api-user/recharge/getQrCodeUrl/${this.order.code}`).then(res=>{
        this.useqrcode(res.data);
      })
      //当检测到订单状态为success的时候，跳转到支付成功页面
      setTimeout(() => {
        this.order.id = this.recharge.id;
        this.axios.post("http://localhost:9999/api-user/recharge/orderquery", this.order).then((ress) => {
          if (ress.data == 'fail') {
            console.log("请求超时")
          }
          if (ress.data == 'fail') {
            console.log('请求失败')
          }
          if (ress.data == 'success') {
            console.log('请求成功')
            this.$router.push("/chengGong")
          }
        })
      }, 3000);
    }
  }
</script>

<style scoped>

</style>
